<template>
  <div class="hello">
       <div id="container"></div>
        <ul class="btn-wrap" style="z-index: 99;">
            <li class = "btn" @click="getInfoContent">信息窗口内容</li>
        </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      infoWindow:''
    }
  },
  mounted() {
      var map = new BMapGL.Map('container');
      var point = new BMapGL.Point(116.404, 39.925);
      map.centerAndZoom(point, 15);
      var opts = {
          width: 200,
          height: 100,
          title: '故宫博物院'
      };
      this.infoWindow = new BMapGL.InfoWindow('地址：北京市东城区王府井大街88号乐天银泰百货八层', opts);
      map.openInfoWindow(this.infoWindow, point);
    },
    methods: {
      getInfoContent() {
          alert(this.infoWindow.getContent());
      }
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #container {
        overflow: hidden;
        width: 100%;
        height:500px;
        margin: 0;
        font-family: "微软雅黑";
    }
    ul li {
        list-style: none;
    }
    .btn-wrap {
        z-index: 999;
        position: fixed;
        bottom: 3.5rem;
        margin-left: 3rem;
        padding: 1rem 1rem;
        border-radius: .25rem;
        background-color: #fff;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    }
    .btn {
        width: 100px;
        height: 30px;
        float: left;
        background-color: #fff;
        color: rgba(27, 142, 236, 1);
        font-size: 14px;
        border:1px solid rgba(27, 142, 236, 1);
        border-radius: 5px;
        margin: 0 5px;
        text-align: center;
        line-height: 30px;
    }
    .btn:hover {
        background-color: rgba(27, 142, 236, 0.8);
        color: #fff;
    }
</style>
